const {
    defineConfig
} = require('@vue/cli-service')
const path = require('path')
const resolve = dir => {
    return path.join(__dirname,'.', dir)
}
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin')
const TerserPlugin = require('terser-webpack-plugin');//代码混淆

module.exports = defineConfig({
	transpileDependencies: true,
	// 如果你需要基于环境有条件地配置行为，或者想要直接修改配置，那就换成一个函数(该函数会在环境变量被设置之后懒执行)
    chainWebpack: config => {
        config.resolve.alias
            .set('@', resolve('src'));
        config.module.rules.delete("svg"); //重点:删除默认配置中处理svg,
        config.module
            .rule('svg-sprite-loader')
            .test(/\.svg$/)
            .include
            .add(resolve('src/assets/svgIcon')) //处理svg目录（根据你建的文件路径）
            .end()
            .use('svg-sprite-loader')
            .loader('svg-sprite-loader')
            .options({
                symbolId: 'icon-[name]'
			})
		// 打包可视化，npm run build可以自动打开可视化界面
		// config.plugin('webpack-bundle-analyzer')
		// 	.use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
    },
	configureWebpack: {
		mode: 'production',//生产模式，自动开启一些优化
        resolve: {
            symlinks: false,
            alias: {
                vue: path.resolve('./node_modules/vue')
            }
        },
        plugins: [
			new MonacoWebpackPlugin({ languages: [] }),
            AutoImport({
                resolvers: [ElementPlusResolver()],
            }),
            Components({
                resolvers: [ElementPlusResolver()],
            }),
		],
		// 缓存生成的 webpack 模块和 chunk，来改善构建速度
		cache: {
			type: 'filesystem',
			allowCollectingMemory: true,
		},
		// 优化
		optimization: {
			minimize: true,
			minimizer: [new TerserPlugin()],
			// 拆分代码
			splitChunks: {
				chunks: "all",
				// 设置缓存组用来抽取满足不同规则的chunk
				cacheGroups: {
					"monaco-editor": {
						test: /[\\/]monaco-editor[\\/]/,
						name: "monaco-editor",
						enforce: true,
						reuseExistingChunk: true
					},
					'view-ui-plus': {
						test: /[\\/]view-ui-plus[\\/]/,
						name: "view-ui-plus",
						enforce: true,
						reuseExistingChunk: true
					},
					'element-plus': {
						test: /[\\/]element-plus[\\/]/,
						name: "element-plus",
						enforce: true,
						reuseExistingChunk: true
					},
					"@antv": {
						test: /[\\/]@antv[\\/]/,
						name: "@antv",
						enforce: true,
						reuseExistingChunk: true
					},
					lodash: {
						test: /[\\/]lodash[\\/]/,
						name: "lodash",
						enforce: true,
						reuseExistingChunk: true
					},
					'vue3-pdf-app': {
						test: /[\\/]vue3-pdf-app[\\/]/,
						name: "vue3-pdf-app",
						enforce: true,
						reuseExistingChunk: true
					},
					echarts: {
						test: /[\\/]echarts[\\/]/,
						name: "echarts",
						enforce: true,
						reuseExistingChunk: true
					}
				}
			}
		},

    },
    lintOnSave: false, // 是否在保存的时候检查
    productionSourceMap: false, // 生产环境是否生成 .map 文件
    devServer: {
        host: 'localhost',
        port: 8081,
        https: false,
        open: true, //配置自动启动浏览器
        proxy: {
            '/api': {
                target: 'http://localhost:8888', // 想要请求的url地址
                ws: true, // 是否要开启代理
                changeOrigin: true, // 是否保留host头，默认为false，如果为false，就会保留，为true会覆盖
                pathRewrite: {
                    '^/api': '/'
                }
            }
        }
    }
})